<template>
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="60%">
		<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
			<el-row :gutter="10" class="mb20" v-show="form.applicationStatus">
				<el-col :span="12">
					<el-form-item label="商户状态">
						<el-input :value="applicationStatusText(form.applicationStatus)" disabled />
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="form.mchid">
					<el-form-item label="商户号">
						<el-input v-model="form.mchid" disabled />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20" v-if="form.applicationStatus == 'REVIEW_BACK'">
				<el-col>
					<el-form-item label="驳回原因">
						<el-input v-model="form.auditOpinion" :rows="2" type="textarea" disabled />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20" v-if="form.applicationStatus == 'AUTHENTICITY_VERIFYING'">
				<el-col>
					<el-form-item label="进度说明">
						<el-input :value="progressDescriptionText(form.progressDescription)" :rows="2" type="textarea" disabled />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20" v-if="form.applicationStatus == 'AGREEMENT_SIGNING'">
				<el-col>
					<el-form-item label="签署地址">
						<el-link type="success" :href="form.agreementSignUrl">前往签约</el-link>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="商户类型" prop="signType">
						<el-select v-model="form.signType" placeholder="请选择商户类型" style="width: 100%">
							<el-option label="个体工商户" value="INDIVIDUAL" />
							<el-option label="企业" value="ENTERPRISE" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="商户证件编号" prop="licenceNo">
						<el-input v-model="form.licenceNo" placeholder="请输入商户证件编号" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="商户名称" prop="signName">
						<el-input v-model="form.signName" placeholder="请输入商户名称" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="商户简称" prop="shortName">
						<el-input v-model="form.shortName" placeholder="请输入商户简称" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="开户许可证编号" prop="openAccountLicenceNo">
						<el-input v-model="form.openAccountLicenceNo" placeholder="请输入开户许可证编号" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="法人姓名" prop="legalName">
						<el-input v-model="form.legalName" placeholder="请输入法人姓名" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="法人证件类型" prop="legalLicenceType">
						<el-select v-model="form.legalLicenceType" placeholder="请选择法人证件类型" style="width: 100%">
							<el-option label="身份证" value="ID_CARD" />
							<el-option label="护照" value="PASSPORT" />
							<el-option label="港澳居民往来内地通行证" value="HM_VISITORPASS" />
							<el-option label="台胞证" value="TAIWAN" />
							<el-option label="士兵证" value="SOLDIER" />
							<el-option label="军官证" value="OFFICERS" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="法人证件号码" prop="legalLicenceNo">
						<el-input v-model="form.legalLicenceNo" placeholder="请输入法人证件号码" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="商户联系人姓名" prop="contactName">
						<el-input v-model="form.contactName" placeholder="请输入商户联系人姓名" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="商户联系人手机号" prop="contactMobile">
						<el-input v-model="form.contactMobile" placeholder="请输入商户联系人手机号" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="商户联系人邮箱" prop="contactEmail">
						<el-input v-model="form.contactEmail" placeholder="请输入商户联系人邮箱" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="银行账户类型" prop="bankAccountType">
						<el-select v-model="form.bankAccountType" placeholder="请选择银行账户类型" style="width: 100%">
							<el-option label="对公账户" value="ENTERPRISE_ACCOUNT" />
							<el-option label="借记卡" value="DEBIT_CARD" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="银行账户号码" prop="bankCardNo">
						<el-input v-model="form.bankCardNo" placeholder="请输入银行账户号码" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="银行账户开户总行" prop="bankCode">
						<el-select
							v-model="form.bankCode"
							filterable
							reserve-keyword
							remote
							clearable
							placeholder="请选择输入关键字选择银行开户总行"
							:remote-method="remoteMethodBank"
							@focus="onBankCodeFocus"
							:loading="bankLoading"
							style="width: 100%"
						>
							<el-option v-for="item in BankOptions" :key="item.number" :label="item.name" :value="item.number"> </el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row v-if="form.applicationStatus == 'AUTHENTICITY_VERIFYING'" :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="补发类型" prop="type">
						<el-select v-model="form.type" placeholder="请选择补发类型" style="width: 100%">
							<el-option label="短信" value="MOBILE" />
							<el-option label="邮箱" value="EMAIL" />
							<el-option label="电子签章" value="ELECTRONIC_SIGNATURE" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col>
					<el-form-item label="详细地址" prop="area">
						<el-cascader v-model="form.area" :props="addressProps" placeholder="请选择省市区" class="w100" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mb20">
				<el-col>
					<el-form-item prop="address">
						<el-input v-model="form.address" :rows="3" type="textarea" placeholder="请输入详细地址" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item prop="show_licenceUrl_platform">
						<template #label>
							商户证件<br />
							大小不超过2M
						</template>
						<yibao-image-upload
							v-model="form.show_licenceUrl_platform"
							:uploadImgUrl="uploadImgUrl"
							ref="imageUploadLicenceImgRef"
							@onDelete="onDelete"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item prop="show_openAccountLicenceUrl_platform">
						<template #label>
							开户许可证<br />
							大小不超过2M<br />
							<el-popover
								placement="top-start"
								title="注："
								width="200px"
								trigger="hover"
								content="没有开户许可证的话，需要公司开户账户信息的资料代替，例如基本存款账户信息，办理开户时的底单，或者同时办理的印签卡，都可以视为有效材料。"
							>
								<template #reference>
									<el-button type="danger"> 上传须知 </el-button>
								</template>
							</el-popover>
						</template>
						<yibao-image-upload
							v-model="form.show_openAccountLicenceUrl_platform"
							:uploadImgUrl="uploadImgUrl"
							ref="imageUploadopenAccountLicenceImgRef"
							@onDelete="onDelete"
						/>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item prop="show_legalLicenceFrontUrl_platform">
						<template #label>
							身份证人像面<br />
							大小不超过2M
						</template>
						<yibao-image-upload
							v-model="form.show_legalLicenceFrontUrl_platform"
							:uploadImgUrl="uploadImgUrl"
							ref="imageUploadLegalLicenceFrontImgRef"
							@onDelete="onDelete"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item prop="show_legalLicenceBackUrl_platform">
						<template #label>
							身份证国徽面<br />
							大小不超过2M
						</template>
						<yibao-image-upload
							v-model="form.show_legalLicenceBackUrl_platform"
							:uploadImgUrl="uploadImgUrl"
							ref="imageUploadLegalLicenceBackImgRef"
							@onDelete="onDelete"
						/>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<!--  v-if="!form.requestNo || form.applicationStatus == 'REVIEW_BACK'" -->
				<el-button type="primary" v-if="!form.requestNo || form.applicationStatus == 'REVIEW_BACK'" :loading="submitLoading" @click="onSubmitForm">
					确 定
				</el-button>
				<el-button type="primary" v-if="form.applicationStatus == 'AUTHENTICITY_VERIFYING'" :loading="submitLoading" @click="onSubmitForm">
					补发验证信息
				</el-button>
				<el-button @click="onCancel">取 消</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts">
import { nextTick, reactive, ref, toRefs } from 'vue';
import { ElMessage } from 'element-plus';

import { yibaoArea, yibaoBank, supplierMchidInfo, supplierMchidCreate } from '/@/api/admin';
import { verifyReissue } from '/@/api/admin1';
import YibaoImageUpload from '/@/components/yibaoImageUpload/index.vue';
export default {
	name: 'merchantsAddDialog',
	components: {
		YibaoImageUpload,
	},
	setup() {
		let callback: Function = () => {};
		const formRef = ref(null);
		const imageUploadLicenceImgRef = ref(null);
		const imageUploadopenAccountLicenceImgRef = ref(null);
		const imageUploadLegalLicenceFrontImgRef = ref(null);
		const imageUploadLegalLicenceBackImgRef = ref(null);
		const state = reactive({
			title: '商户号信息',
			uploadImgUrl: `${import.meta.env.VITE_API_URL}/admin/mchid_upload_file`, // 上传资质文件
			open: false,
			form: {} as any,
			rules: {
				signType: [{ required: true, message: '商户类型不能为空', trigger: 'blur' }],
				licenceNo: [{ required: true, message: '商户证件编号不能为空', trigger: 'blur' }],
				signName: [{ required: true, message: '商户名称不能为空', trigger: 'blur' }],
				shortName: [{ required: true, message: '商户简称不能为空', trigger: 'blur' }],
				openAccountLicenceNo: [{ required: true, message: '开户许可证编号不能为空', trigger: 'blur' }],
				legalName: [{ required: true, message: '法人姓名不能为空', trigger: 'blur' }],
				legalLicenceType: [{ required: true, message: '法人证件类型不能为空', trigger: ['blur', 'change'] }],
				legalLicenceNo: [{ required: true, message: '法人证件号码不能为空', trigger: 'blur' }],
				contactName: [{ required: true, message: '商户联系人姓名不能为空', trigger: 'blur' }],
				contactMobile: [{ required: true, message: '商户联系人手机号不能为空', trigger: 'blur' }],
				contactEmail: [{ required: true, message: '商户联系人邮箱不能为空', trigger: 'blur' }],
				bankAccountType: [{ required: true, message: '银行账户类型不能为空', trigger: ['blur', 'change'] }],
				bankCardNo: [{ required: true, message: '银行账户号码不能为空', trigger: 'blur' }],
				bankCode: [{ required: true, message: '开户行总行不能为空', trigger: 'blur' }],
				type: [{ required: true, message: '补发类型不能为空', trigger: ['blur', 'change'] }],
				area: [{ required: true, message: '地址不能为空', trigger: ['blur', 'change'] }],
				address: [{ required: true, message: '详细地址不能为空', trigger: 'blur' }],
				show_licenceUrl_platform: [{ required: true, message: '商户证件不能为空', trigger: 'blur' }],
				show_openAccountLicenceUrl_platform: [{ required: true, message: '开户许可证不能为空', trigger: 'blur' }],
				show_legalLicenceFrontUrl_platform: [{ required: true, message: '身份证国徽面不能为空', trigger: 'blur' }],
				show_legalLicenceBackUrl_platform: [{ required: true, message: '身份证人像面不能为空', trigger: 'blur' }],
			}, // 表单校验
			submitLoading: false,
			bankLoading: false,
			BankOptions: [] as any, //开户行
			provinceOptions: [], //省
			cityOptions: [], //市
			countyOptions: [],
			addressProps: {
				lazy: true,
				lazyLoad(node: any, resolve: any) {
					const {
						data: { number },
						level,
					} = node;
					_yibaoArea({ pnumber: level ? number : 0 }, level, resolve);
				},
				value: 'number',
				label: 'name',
			},
			bankCode: '', //银行编号
			supplierId: '', //供应商id
		});

		/********************自定义事件********************/
		//商户状态
		const applicationStatusText = (val: any) => {
			switch (val) {
				case 'REVIEWING':
					return '申请审核中';
				case 'REVIEW_BACK':
					return '申请已驳回';
				case 'AGREEMENT_SIGNING':
					return '协议待签署';
				case 'BUSINESS_OPENING':
					return '业务开通中';
				case 'COMPLETED':
					return '申请已完成';
				case 'AUTHENTICITY_VERIFYING':
					return '真实性验证中';
				default:
					return '';
			}
		};
		//进度说明
		const progressDescriptionText = (val: any) => {
			switch (val) {
				case 'EMAIL_VERIFY':
					return '待邮箱验证';
				case 'MOBILE_VERIFY':
					return '待短信验证';
				case 'REMIT_AUTH':
					return '待打款验证';
				default:
					return '等待联系人进行短信邮箱真实性验证';
			}
		};

		/********** 点击事件(on开头) **********/
		const onBankCodeFocus = () => {
			if (!state.form.bankCode) {
				_yibaoBank({ pageNum: 1, pageSize: 20 });
			}
		};
		//
		const onDelete = () => {
			if (state.form.show_licenceUrl_platform == '') {
				state.form.licenceUrl = '';
				state.form.licenceUrl_platform = '';
			} else if (state.form.show_openAccountLicenceUrl_platform == '') {
				state.form.openAccountLicenceUrl = '';
				state.form.openAccountLicenceUrl_platform = '';
			} else if (state.form.show_legalLicenceFrontUrl_platform == '') {
				state.form.legalLicenceFrontUrl = '';
				state.form.legalLicenceFrontUrl_platform = '';
			} else if (state.form.show_legalLicenceBackUrl_platform == '') {
				state.form.legalLicenceBackUrl = '';
				state.form.legalLicenceBackUrl_platform = '';
			}
		};
		/** 提交按钮***** */
		const onSubmitForm = () => {
			(formRef.value as any)?.validate((valid: boolean) => {
				if (valid) {
					state.submitLoading = true;
					if (state.form.applicationStatus == 'AUTHENTICITY_VERIFYING') {
						_verifyReissue({
							type: state.form.type,
							applicationNo: state.form.applicationNo,
						});
						return true;
					}
					_supplierMchidCreate({
						...state.form,
						from: 'gongyingshang',
						supplier_id: state.supplierId,
						requestNo: state.form.applicationStatus == 'REVIEW_BACK' ? state.form.requestNo : '',
						province: state.form.area[0],
						city: state.form.area[1],
						district: state.form.area[2],
						licenceUrl: state.form.licenceUrl
							? state.form.licenceUrl
							: (imageUploadLicenceImgRef.value as any) && (imageUploadLicenceImgRef.value as any).yibao_url,
						licenceUrl_platform: state.form.licenceUrl_platform
							? state.form.licenceUrl_platform
							: (imageUploadLicenceImgRef.value as any) && (imageUploadLicenceImgRef.value as any).platform_url,
						openAccountLicenceUrl: state.form.openAccountLicenceUrl
							? state.form.openAccountLicenceUrl
							: (imageUploadopenAccountLicenceImgRef.value as any) && (imageUploadopenAccountLicenceImgRef.value as any).yibao_url,
						openAccountLicenceUrl_platform: state.form.openAccountLicenceUrl_platform
							? state.form.openAccountLicenceUrl_platform
							: (imageUploadopenAccountLicenceImgRef.value as any) && (imageUploadopenAccountLicenceImgRef.value as any).platform_url,
						legalLicenceFrontUrl: state.form.legalLicenceFrontUrl
							? state.form.legalLicenceFrontUrl
							: (imageUploadLegalLicenceFrontImgRef.value as any) && (imageUploadLegalLicenceFrontImgRef.value as any).yibao_url,
						legalLicenceFrontUrl_platform: state.form.legalLicenceFrontUrl_platform
							? state.form.legalLicenceFrontUrl_platform
							: (imageUploadLegalLicenceFrontImgRef.value as any) && (imageUploadLegalLicenceFrontImgRef.value as any).platform_url,
						legalLicenceBackUrl: state.form.legalLicenceBackUrl
							? state.form.legalLicenceBackUrl
							: (imageUploadLegalLicenceBackImgRef.value as any) && (imageUploadLegalLicenceBackImgRef.value as any).yibao_url,
						legalLicenceBackUrl_platform: state.form.legalLicenceBackUrl_platform
							? state.form.legalLicenceBackUrl_platform
							: (imageUploadLegalLicenceBackImgRef.value as any) && (imageUploadLegalLicenceBackImgRef.value as any).platform_url,
					});
				}
			});
		};
		// 取消按钮
		const onCancel = () => {
			state.submitLoading = false;
			state.open = false;
			reset();
		};

		/********** 方法事件 **********/
		//打开
		const openDialog = (config: any, fn: Function) => {
			console.log(config);
			callback = fn;
			state.open = true;
			reset();
			state.supplierId = config.supplier_id;
			_supplierMchidInfo(config);
		};
		// 表单重置
		const reset = () => {
			state.form = {
				applicationStatus: '', //状态
				mchid: '', //商户号
				signType: '',
				licenceNo: '',
				signName: '',
				shortName: '',
				openAccountLicenceNo: '',
				legalName: '',
				legalLicenceType: '',
				legalLicenceNo: '',
				contactName: '',
				contactMobile: '',
				contactEmail: '',
				bankAccountType: '',
				bankCardNo: '',
				bankCode: '',
				area: [],
				province: '',
				city: '',
				district: '',
				type: '',
				address: '',
				licenceUrl: '',
				licenceUrl_platform: '',
				show_licenceUrl_platform: '',
				openAccountLicenceUrl: '',
				openAccountLicenceUrl_platform: '',
				show_openAccountLicenceUrl_platform: '',
				legalLicenceFrontUrl: '',
				legalLicenceFrontUrl_platform: '',
				show_legalLicenceFrontUrl_platform: '',
				legalLicenceBackUrl: '',
				legalLicenceBackUrl_platform: '',
				show_legalLicenceBackUrl_platform: '',
			};
			(formRef.value as any)?.resetFields();
			nextTick(() => {
				(imageUploadLicenceImgRef.value as any)?.reset();
				(imageUploadopenAccountLicenceImgRef.value as any)?.reset();
				(imageUploadLegalLicenceFrontImgRef.value as any)?.reset();
				(imageUploadLegalLicenceBackImgRef.value as any)?.reset();
			});
		};
		//搜索银行
		const remoteMethodBank = (data: any) => {
			if (data) {
				_yibaoBank({ pageNum: 1, pageSize: 20, name: data });
			}
		};

		/*****************************网络请求***************************/
		// 选择省市区
		const _yibaoArea = (_data: object, _level: number, resolve: any) => {
			yibaoArea(_data).then((res: any) => {
				let nodes = res.data.list.map((item: any) => ({
					number: item.number,
					name: item.name,
					leaf: _level >= 2,
				}));
				resolve(nodes);
			});
		};
		//银行编码信息
		const _yibaoBank = (_data: object) => {
			state.bankLoading = true;
			yibaoBank(_data)
				.then((res: any) => {
					console.log(res);
					state.BankOptions = res.data.list;
					state.bankLoading = false;
				})
				.catch(() => {
					state.bankLoading = false;
				});
		};
		//获取入网信息
		const _supplierMchidInfo = (data: object) => {
			supplierMchidInfo(data)
				.then((res: any) => {
					console.log(res);
					if (Object.keys(res.data.info).length) {
						state.form = {
							...res.data.info,
							licenceUrl: res.data.info.licenceUrl_yibao,
							licenceUrl_platform: res.data.info.licenceUrl_platform,
							openAccountLicenceUrl: res.data.info.openAccountLicenceUrl_yibao,
							openAccountLicenceUrl_platform: res.data.info.openAccountLicenceUrl_platform,
							legalLicenceFrontUrl: res.data.info.legalLicenceBackUrl_yibao,
							legalLicenceFrontUrl_platform: res.data.info.legalLicenceFrontUrl_platform,
							legalLicenceBackUrl: res.data.info.legalLicenceBackUrl_yibao,
							legalLicenceBackUrl_platform: res.data.info.legalLicenceBackUrl_platform,
							area: [res.data.info.province, res.data.info.city, res.data.info.district],
							type: '',
						};
						state.BankOptions = [{ number: res.data.info.bankCode, name: res.data.info.bank_name }];
					}
					nextTick(() => {
						(imageUploadLicenceImgRef.value as any)?.dataLoading();
						(imageUploadopenAccountLicenceImgRef.value as any)?.dataLoading();
						(imageUploadLegalLicenceFrontImgRef.value as any)?.dataLoading();
						(imageUploadLegalLicenceBackImgRef.value as any)?.dataLoading();
					});
				})
				.catch((err) => {
					console.log(err);
				});
		};
		//提交入网信息
		const _supplierMchidCreate = (_data: object) => {
			supplierMchidCreate(_data)
				.then((res: any) => {
					console.log('res', res);
					ElMessage.success('操作成功');
					onCancel();
					callback();
				})
				.catch((err) => {
					console.log('阿达', err);
					state.submitLoading = false;
				});
		};
		// 【供应商入网】补发短信/邮箱/电子签章
		const _verifyReissue = (_data: object) => {
			verifyReissue(_data)
				.then((res: any) => {
					console.log('res', res);
					ElMessage.success('操作成功');
					onCancel();
					callback();
				})
				.catch((err) => {
					console.log('阿达', err);
					state.submitLoading = false;
				});
		};

		return {
			formRef,
			imageUploadLicenceImgRef,
			imageUploadopenAccountLicenceImgRef,
			imageUploadLegalLicenceFrontImgRef,
			imageUploadLegalLicenceBackImgRef,
			onBankCodeFocus,
			applicationStatusText,
			progressDescriptionText,
			onSubmitForm,
			openDialog,
			onCancel,
			remoteMethodBank,
			onDelete,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
